<script src="./script.js"></script>
<style src="./style.scss" lang="scss" scoped></style>
<template>
  <div>
    <web-header></web-header>

    <div class="wrap w" v-if="quoteData">
      <div class="bread pl10">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>在线报价</el-breadcrumb-item>
          <el-breadcrumb-item>印刷画册</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="pl10">

        <div class="fitem">
          <label class="label">封面：</label>
          <div class="">
            <el-radio-group v-model="quoteValue.category" @change="onCategoryChange">
              <el-radio-button :label="item.name" :value="item.name" v-for="item in quoteData.cateData.list"></el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="fitem">
          <label class="label">内页1：</label>
          <div class="">
            <el-select v-model="quoteValue.insideCategory1" placeholder="请选择" style="width: 200px">
              <el-option
                v-for="item in quoteData.cateData.list"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <el-input v-model="quoteValue.insidePageQuantity1" style="width:100px"></el-input>
            <label>P</label>
          </div>
        </div>
        <div class="fitem">
          <label class="label">内页2：</label>
          <div class="">
            <el-select v-model="quoteValue.insideCategory2" placeholder="请选择" style="width: 200px">
              <el-option
                v-for="item in quoteData.cateData.list"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <el-input v-model="quoteValue.insidePageQuantity2" style="width:100px"></el-input>
            <label>P</label>
          </div>
        </div>

        <div class="fitem">
          <label class="label">尺寸：</label>
          <div style="display: flex;align-items: center;">
            <el-switch
              v-model="customSize"
              active-text="自定义尺寸"
              @change="onCustomSizeToggle"
              style="margin-right: 10px;"
            >
            </el-switch>

            <div v-if="!customSize">
              <el-select v-model="quoteValue.size" placeholder="请选择" @change="onCustomSizeToggle" style="width: 180px" v-if="!customSize">
                <el-option
                  v-for="(item,index) in quoteData.sizeData.list"
                  :key="index"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </div>

            <div v-if="customSize">
              装订边<el-input v-model="quoteValue.customLength" style="width:120px"></el-input>
              *
              <el-input v-model="quoteValue.customWidth" style="width:120px"></el-input>
            </div>

            <span style="margin-left: 5px;" v-if="customSize">mm</span>

          </div>
        </div>

        <div class="fitem">
          <label class="label">数量：</label>
          <div>
            <el-input-number
              style="width:150px"
              v-model="quoteValue.customQuantity"
              :min="1"
              :step="1"
              @change="customQuantity"
              :step-strictly="true" />
          </div>
        </div>

        <div class="fitem">
          <label class="label">工序：</label>
          <div class="" style="margin-right: 10px">
            <div class="process">
              <div class="panel">
                <div class="item">
                  <el-checkbox v-model="checkValue.flagCode" style="margin-right:10px">打码</el-checkbox>
                  <el-select size="mini" v-model="quoteValue.code" v-if="checkValue.flagCode" style="width:100px">
                    <el-option label="1个" value="1" />
                    <el-option label="2个" value="2" />
                    <el-option label="3个" value="3" />
                    <el-option label="4个" value="4" />
                  </el-select>
                </div>
              </div>
              <div class="panel">
              </div>
            </div>
          </div>

        </div>

      </div>

      <div class="pl10" style="width:600px;margin-bottom:10px;" v-if="quoteList">
        <el-table
          :data="quoteList"
          border
          fit
        >
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span>{{ row.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="材料">
            <template slot-scope="{row}">
              <span>{{ row.materialAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="后道工序">
            <template slot-scope="{row}">
              <span>{{ row.processAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总价">
            <template slot-scope="{row}">
              <span>{{ row.totalAmount }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pl10" style="margin-bottom: 10px;" v-if="quoteList">
        <div style="margin-bottom: 10px;">请上传设计文件，最多10个文件，单文件不超2M</div>
        <el-upload
          action="#"
          :multiple="true"
          :file-list="fileList"
          list-type="text"
          :http-request="handleUpload"
          :auto-upload="true"
          :limit="10"
        >
          <el-button size="small" plain>点击上传</el-button>
        </el-upload>
      </div>

      <div class="pl10" style="margin-bottom: 10px;font-weight: bold" v-if="quoteList">
        <span style="color: #C03639;font-size: 16px;margin-right:20px;">￥{{ postData.amount }}</span>{{ postData.detail }}
      </div>

      <div class="pl10" style="display: flex; align-items: center;margin-bottom: 10px;">
        <el-button type="primary" size="large" plain @click="getQuote">获取报价</el-button>
        <el-button type="primary" size="large" @click="submitOrder" v-if="quoteList">提交订单</el-button>
        <div style="color: red;margin-left: 10px;">*下单人承诺：所提供资料（含知识产权）真实、合法，由此引发的所有问题由下单人负责，此订单等同于<a href="#">《印刷委托书》</a></div>
      </div>
    </div>

  </div>
</template>
